<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>星座排名</title>
		 <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">计算星座学</h1>
		</header>
		<!--<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="indexTest.html">
				<!--<span class="mui-icon mui-icon-home"></span>-->
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item mui-active" href="index2.html">
				<!--<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>-->
				<span class="mui-tab-label">星座排名</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<!--<span class="mui-icon mui-icon-contact"></span>-->
				<span class="mui-tab-label">职业排名</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<!--<span class="mui-icon mui-icon-gear"></span>-->
				<span class="mui-tab-label">职业距离</span>
			</a>
		</nav>-->
			<div class="mui-content">
			<div class="mui-card">
				<ul class="mui-table-view mui-table-view-chevron">
					<!--<li class="mui-table-view-cell">card（圆角列表）
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</li>-->
					<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">演员</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">演员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">成人电影演员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">喜剧演员</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">建筑师</a>
							</li>
					<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">艺术家</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">艺术家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">音乐家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">画家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">歌唱家</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">无神论者</a>
							</li>
					<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">运动员</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">国际象棋手</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">自行车运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">足球运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">相扑运动员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">兵乓球运动员</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">商人</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">CEO</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">厨师</a>
							</li>
								<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">宗教人士</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">大主教</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">神职人员</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">教皇</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">圣徒</a>
							</li>
						</ul>
					</li>
		<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">罪犯</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">经济学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">工程师</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">法官</a>
							</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">同性恋</a>
							</li>
								<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">文学家</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">小说家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">诗人</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">作家</a>
							</li>
						</ul>
					</li>
						<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">诺贝尔获奖者</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">诺贝尔获奖者</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">化学奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">经济学奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">文学奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">和平奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">物理奖</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">生理或医学奖</a>
							</li>
						</ul>
					</li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">哲学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">花花公子封面女郎</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">政治家</a>
							</li>
								<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">科学家</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">科学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">生物学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">化学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">计算机科学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">数学家</a>
							</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">物理学家</a>
							</li>
						</ul>
					</li>
							<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">间谍</a>
							</li>
				</ul>
			</div>
		</div>
	</body>
		<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
//		window.addEventListener('toggle', function(event) {
//			if (event.target.id === 'M_Toggle') {
//				var isActive = event.detail.isActive;
//				var table = document.querySelector('.mui-table-view');
//				var card = document.querySelector('.mui-card');
//				if (isActive) {
//					card.appendChild(table);
//					card.style.display = '';
//				} 
//				else {
//					var content = document.querySelector('.mui-card');
//					content.insertBefore(table, card);
//					card.style.display = 'none';
//				}
//			}
//		});
	</script>
</html>
